import { useEffect, useState } from 'react'
import { childrenMap } from '../util/Utils'
import './style.less'
function MainButton(props){
    let {children, onChange, move, isMain } = props
    let [open, setOpen] = useState(false)
    let [hover, setHover] = useState(false)
    useEffect(() => {
        console.log(move)
        if(!move){
            onChange && onChange(open)
        }
    }, [move, open, onChange])
    return <div onMouseUp={()=>{
        setOpen(!open)
    }} onMouseEnter={()=>{
        setHover(true)
    }} onMouseLeave={()=>{
        setHover(false)
    }} className={`${open?'float-main-btn-open':'float-main-btn-close'} float-main-btn ${isMain?`${move?'float-main-btn-move':''}`:''}`}>
        {children?children:<div className={`float-main-btn-icon ${hover?'float-main-btn-icon-hover':'float-main-btn-icon-leave'} ${open?'float-main-btn-icon-open':'float-main-btn-icon-close'}`}>

        </div>}
    </div>
}

function ChildButton(props){
    let {open, children, idx, rotate} = props
    const [rotateStyle, setRotate] = useState('0')
    return <div className={`float-child-btn ${open?`float-child-btn-open-${idx}`:''}`} 
            onClick={(e)=>{
                e.stopPropagation()
                // console.log(children)
            }}
            onMouseOver={(e)=>{
                e.stopPropagation()
                let type = ''
                // console.log(children)
                childrenMap(children).forEach(child=>{
                    // console.log(child)
                    if(child.props?.childBtn){
                        type = 'mainBtn'
                    }
                })
                // console.log(type)
                if(type === 'mainBtn') return 
                else{
                    console.log('旋转', rotate)
                    setRotate(rotate)
                } 
            }}
            onMouseLeave={(e)=>{
                e.stopPropagation()
                setRotate(0)
            }}
            style={{
                transform:`rotate(${rotateStyle?rotateStyle:0}deg)`
           }}>
            {childrenMap(children,{isMain: false})}
    </div>
}

function FloatButton(props){
    let { centerBtn, childBtn, rotate, childRotate } = props
    let [open, setOpen] = useState(false)
    let [move, setMove] = useState(false)
    let timer = null
    return <div className={`float-btn ${move?'float-btn-move':''}`} style={{
        transform:`rotate(${`${rotate?rotate:0}deg`})`
    }} onMouseDown={(e)=>{
        e.stopPropagation()
        timer = setTimeout(() => {
            setMove(true)
        }, 1000);
    }} onMouseUp={(e)=>{
        e.stopPropagation()
        setMove(false)
        clearTimeout(timer)
    }} onMouseLeave={(e)=>{
        e.stopPropagation()
        clearTimeout(timer)
        setMove(false)
    }}>
        {centerBtn?<MainButton move={move} onChange={(open)=>{
            // console.log(open)
            setOpen(open)
        }}>{centerBtn}</MainButton>:<MainButton move={move} onChange={(open)=>{
            // console.log(open)
            setOpen(open)
        }}></MainButton>}
        {
            childBtn.map((btn, idx)=>{
                if(idx<=2){
                    return <ChildButton rotate={`${-childRotate}`} key={idx} idx={idx} open={open}>
                        {btn}
                    </ChildButton>
                }
                return false
            })
        }
    </div>
}
export default FloatButton